<template>
<div class="container">
    <div class="page-head">
        <div class="left">
            <el-form :inline="true" :model="query" @submit.native.prevent>
                <el-form-item>
                    <el-button type="danger" @click="showCreateView"><i class="el-icon-plus" style="margin-right: 5px"></i>添加</el-button>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="query.keyword" placeholder="关键字" clearable></el-input>
                </el-form-item>
                <el-button type="primary" native-type="submit" @click="doSearch">搜索</el-button>
            </el-form>
        </div>
    </div>

    <el-table ref="tableView" height="tableHeight" class="page-body" v-loading="loading" :data="tableData" border :default-expand-all="isExpand" :expand-row-keys="expandRows" :row-key="getRowKeys" highlight-current-row :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column label="编号" prop="id" width="100" align="center"></el-table-column>
        <el-table-column label="名称" prop="title"></el-table-column>
        <el-table-column label="头图" prop="type" width="150" align="center">
            <template slot-scope="scope">
                <el-image :src="scope.row.big_pic" style="width: 100px; height: 100px;" :preview-src-list="[scope.row.big_pic]"></el-image>
            </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort" width="100" align="center"></el-table-column>
        <el-table-column label="是否默认" width="120" align="center">
            <template slot-scope="scope">
                <el-button v-if="scope.row.is_default != 0" type="warning" size="mini">默认类型</el-button>
                <el-button v-else type="info" size="mini" @click="setDefault(scope.row)">设为默认</el-button>
            </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time" width="160" align="center"></el-table-column>
        <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
                <el-button type="primary" @click="showEditView(scope.row)">编辑</el-button>
                <el-button type="danger" @click="deleteRow(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 添加客资 -->
    <save-view ref="saveView" @getTableData="getTableData">></save-view>
</div>
</template>

<script>
import {
    getTreeListApi,
    setDefaultCategoryApi,
    deleteCategoryApi,
} from "@/api/product/category";
import saveView from "./save.vue";

export default {
    components: {
        saveView
    },
    data() {
        return {
            query: {
                keyword: "",
            },
            isExpand: false,
            expandRows: [],
            loading: false,
            tableData: []
        };
    },
    created() {
        this.getTableData();
    },
    methods: {
        getTableData() {
            getTreeListApi({}).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.tree;
                } else {
                    this.$message.warning(res.msg);
                }
            });
        },
        getRowKeys(row) {
            return row.id;
        },
        doSearch() {
            this.getTableData();
        },
        showCreateView() {
            this.$refs["saveView"].showCreate();
        },
        showEditView(row) {
            this.$refs["saveView"].showEdit(row);
        },
        navigateTo(path, row) {
            this.$router.push({
                path: path,
                query: {
                    category_id: row.id,
                },
            });
        },
        setDefault(row) {
            this.$confirm("确认设置为默认分类?", "警告", {
                    type: "warning",
                })
                .then((res) => {
                    setDefaultCategoryApi(row)
                        .then((res) => {
                            if (res.code == 200) {
                                this.getTableData();
                                this.$message.success(res.msg);
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((res) => {
                            this.$message.info("系统异常，请联系管理员");
                        });
                })
                .catch((res) => {
                    this.$message.info("操作已取消");
                });
        },
        deleteRow(row) {
            this.$confirm("确认删除该条信息?", "警告", {
                    type: "warning",
                })
                .then((res) => {
                    deleteCategoryApi(row)
                        .then((res) => {
                            if (res.code == 200) {
                                this.getTableData();
                                this.$message.success(res.msg);
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((res) => {
                            this.$message.info("系统异常，请联系管理员");
                        });
                })
                .catch((res) => {
                    this.$message.info("操作已取消");
                });
        },
    },
};
</script>
